<template>
  <div class="areaLineChart">
      <div class="chart_bd" id="areaLine"></div>
  </div>
</template>

<script>
var areaLineChart;
export default {
  name: 'areaLineChart',
  props: ['monthData'],
  data () {
      return {
          areaLineChart: ''
      }
  },
  watch: {
      monthData: function (newQuestion, oldQuestion) {
       this.initAreaLineChart();
      }
  },
  mounted () {
  },
  methods: {
      initAreaLineChart () {
        // 基于dom，初始化echarts实例
        areaLineChart = this.$echarts.getInstanceByDom(document.getElementById('areaLine'))
        if (areaLineChart === undefined) {
            areaLineChart = this.$echarts.init(document.getElementById('areaLine'));
        }
        var option = {
            //hover显示
            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {
                    var formatterHtml = params[0].name + "<br>";
                    for (let i = 0; i < params.length; i++) {
                        formatterHtml += params[i].marker + "数据量：" + params[i].value + "<br>";
                    }
                    return formatterHtml;
                },
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLine: {
                    lineStyle: {    //坐标线
                        color: '#808080'
                    }
                },
                axisLabel: {
                    margin: 15,
                    align: 'center',
                    htmlStyle: {
                        color: '#364662',//坐标值的具体的颜色
                        fontSize: 12
                    }
                },
                axisTick: {//x轴刻度线
                    "show": true
                },
                namehtmlStyle: {
                    align: 'center'
                }
            },
            yAxis: {
                type: 'value',
                name: '单位（人）',
                splitLine: {
                    show: false
                },//网格线
                axisLine: {
                    lineStyle: {
                        color: '#808080'
                    }
                },
                axisLabel: {        //y轴坐标文字
                    margin: 15,
                    formatter: function (value) {
                        return value = (value != 0 ? value : value + '0');
                    },
                    htmlStyle: {
                        color: '#364662',//坐标值的具体的颜色
                        fontSize: 12
                    },
                },
                splitLine: {            //坐标轴分割线
                    lineStyle: {
                        // 使用深浅的间隔色
                        color: '#808080'
                    }
                },
                axisTick: {//y轴刻度线
                    "show": true
                }
            },
            grid: {
                left: 20,
                right: 30,
                top: 40,
                bottom: 20,
                containLabel: true
            },
            series: [
                {
                    name: '',
                    type: 'line',
                    smooth: true,
                    data: this.monthData,
                    itemStyle: {
                        // color:'#0bebed'
                        normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0, color: '#008B8B' // 0% 处的颜色
                            },{
                                offset: 1, color: '#696969' // 100% 处的颜色
                            }]
                            ), //背景渐变色    
                            lineStyle: {        // 系列级个性化折线样式  
                                width: 3,
                                type: 'solid',
                                color: "#2F4F4F" //折线的颜色
                            }
                        }
                    },
                    symbolSize: 0,	//折线点的大小
                    areaStyle: {}, // 设置此属性就会填充颜色
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        areaLineChart.setOption(option);
      },
      resizeChart () {
          areaLineChart.resize()
      }
  },
  beforeDestroy () {
      this.$echarts.dispose(areaLineChart);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.areaLineChart{
    height: 100%;
}
.chart_bd {
    height: 100%;
    color: #085d6f;
}
</style>
